<template>
  <div class="design-token-page" :style="style">
    <svg style="width: 0; height: 0; visibility: hidden; display: block">
      <symbol id="icon1" viewBox="0 0 32 32">
        <path
          fill="currentColor"
          d="M14.667 4c5.891 0 10.667 4.776 10.667 10.667 0 2.464-.836 4.733-2.239 6.539l4.448 4.451-1.886 1.886-4.449-4.449a10.62 10.62 0 0 1-6.541 2.24C8.776 25.334 4 20.558 4 14.667S8.776 4 14.667 4zm0 2.667a8 8 0 1 0 0 16 8 8 0 0 0 0-16z"
        />
      </symbol>
      <symbol id="edit" viewBox="0 0 24 24">
        <path
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
        ></path>
      </symbol>
    </svg>
    <div class="theme-switch">
      <div class="theme-item" :class="{ 'is-active': themeType === item.name }" v-for="item in themeTypeList" :key="item.name" @click="themeTypeClick(item)">
        {{ item.name }}
      </div>
    </div>
    <div class="token-body">
      <div class="token-nav">
        <h2>Design Token</h2>
        <div class="token-nav-item" v-for="item in tokenList" :key="item.type" @click="onNavClick(item)" :class="{ active: item.type === currentType }">
          <div>{{ item.name }}</div>
          <div class="type">{{ item.type }}</div>
        </div>
      </div>
      <div class="token-list">
        <div class="token-section" v-for="item in tokenList" :key="item.type" :class="item.type" v-show="item.type === currentType">
          <template v-if="item.type !== 'font'">
            <div class="token-catg-list">
              <div class="token-catg" v-for="catg in item.value" :key="catg.catg">
                <div class="token-catg-name">
                  {{ catg.name }}<span>{{ catg.catg }}</span>
                </div>
                <div class="token-vars" :class="[item.type, catg.catg]">
                  <div class="token-item" :class="[item.type, catg.catg]" v-for="tk in catg.value" :key="tk.key">
                    <template v-if="tk.value[currentTheme]">
                      <div class="token-display color" v-if="item.type === 'color'">
                        <div class="token-show color" :style="{ background: tk.value[currentTheme] }"></div>
                        <div class="token-val">
                          {{ tk.value[currentTheme] }}
                          <!-- <svg class="icon edit">
                            <use xlink:href="#edit" />
                          </svg> -->
                        </div>
                      </div>
                      <div class="token-display palette" v-else-if="item.type === 'palette'">
                        <div class="token-show palette" :style="{ background: `rgb(${tk.value[currentTheme]})` }"></div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display" v-else-if="item.type === 'shadow'">
                        <div class="token-show shadow" :style="{ boxShadow: tk.value[currentTheme] }"></div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display size" v-else-if="catg.catg === 'size'">
                        <div class="token-show size">
                          <div class="token-show-size-box" :style="{ height: tk.value[currentTheme] }"></div>
                        </div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display" v-else-if="catg.catg === 'icon_size'">
                        <div class="token-show icon">
                          <div class="token-icon" :style="{ fontSize: tk.value[currentTheme] }">
                            <svg>
                              <use xlink:href="#icon1" />
                            </svg>
                          </div>
                        </div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display" v-else-if="catg.catg === 'radius'">
                        <div class="token-show radius" :style="{ borderRadius: tk.value[currentTheme] }"></div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display" v-else-if="item.type === 'gap'">
                        <div class="token-show gap">
                          <div class="token-box"></div>
                          <div class="token-box" :style="{ marginTop: tk.value[currentTheme] }"></div>
                        </div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                      <div class="token-display animation" v-else-if="item.type === 'animation'">
                        <div class="token-show">
                          <div class="token-ball" v-if="catg.catg === 'duration'" :style="{ animationDuration: tk.value[currentTheme] }"></div>
                          <div class="token-ball" v-if="catg.catg === 'easing'" :style="{ animationTimingFunction: tk.value[currentTheme] }"></div>
                        </div>
                        <div class="token-val">{{ tk.value[currentTheme] }}</div>
                      </div>
                    </template>
                    <div class="token-name">
                      {{ tk.name }} <span class="token-key">[{{ tk.key }}]</span>
                    </div>
                    <div class="token-desc">{{ tk.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="token-item" v-for="(tk, idx) in item.value[0].value" :key="tk.key">
              <div class="token-display font">
                <div class="token-val">字号[{{ tk.key }}]: {{ tk.value[currentTheme] }}</div>
                <div class="token-val">行高[{{ item.value[1].value[idx].key }}]: {{ item.value[1].value[idx].value[currentTheme] }}</div>
                <div class="token-show-font" :style="{ fontSize: tk.value[currentTheme], lineHeight: item.value[1].value[idx].value[currentTheme] }">
                  {{ tk.name }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Tokens from "./opendesign-token.json";
import AscendTokens from "./ascend-token.json";
import { normalizeTokens, getVars } from "./token";
import { ref, computed } from "vue";

document.title = "Design Token -- Editor";

const themeTypeList = [
  { name: "opendesign", token: Tokens },
  { name: "ascend", token: AscendTokens },
];

const themeType = ref(themeTypeList[0].name);
const themeTypeToken = ref(themeTypeList[0].token);

const currentTheme = "light";

const tokenList = ref(normalizeTokens(Tokens));
console.log(tokenList);

const currentType = ref(tokenList.value[0].type);
const onNavClick = (item: any) => {
  currentType.value = item.type;
};

const vars = ref(getVars(Tokens, "light"));
const style = computed(() => {
  const s = {};
  vars.value.forEach((item) => {
    Object.assign(s, item);
  });
  return s;
});

const themeTypeClick = (type: any) => {
  themeType.value = type.name;
  const t = type.token;
  tokenList.value = normalizeTokens(t);
  currentType.vlaue = tokenList.value[0].type;
  vars.value = getVars(t, "light");
};
</script>

<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -2px;
}
h2 {
  text-align: center;
  padding: 24px 0 36px;
  margin: 0;
  background-color: #002fa7;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.token-body {
  display: flex;
}
.token-nav {
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  display: inline-block;
  width: 120px;
  vertical-align: top;
  height: 100vh;
}
.token-nav-item {
  text-align: center;
  font-size: 24px;
  color: #000;
  padding: 24px;
  cursor: pointer;

  .type {
    font-size: 0.6em;
    color: #666;
  }

  &.active {
    background-color: #c7d7ff;
  }
}
.token-list {
  padding-top: 24px;
  height: 100vh;
  width: calc(100vw - 120px);
  overflow: auto;
  padding-left: 48px;
}
.token-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.token-catg {
  margin-bottom: 24px;
}
.token-catg-name {
  font-size: 20px;
  color: #000;
  > span {
    font-size: 0.8em;
    color: #666;
    margin-left: 8px;
  }
}
.token-vars {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: flex-end;
  &.palette {
    justify-content: flex-start;
  }
}
.token-item {
  text-align: center;
  margin: 12px;

  &.animation {
    width: 100%;
    text-align: left;
  }
  &.palette {
    margin: 0;
  }
}
.token-display {
  min-width: 150px;

  &.font {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .token-val {
      margin-right: 12px;
      margin-top: 0;
    }
    .token-show-font {
      margin-left: 36px;
    }
  }
  &.palette {
    .token-show {
      margin: 0;
      width: 100%;
    }
  }
}

.token-show-size-box {
  width: 120px;
  border: 1px solid #eee;
  margin: auto;
}
.token-show {
  margin: auto;

  &.color {
    width: 100px;
    height: 60px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  &.palette {
    height: 60px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  }
  &.size {
    height: 60px;
    display: flex;
    align-items: flex-end;
  }
  &.shadow {
    width: 120px;
    height: 120px;
  }
  &.icon {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.radius {
    width: 64px;
    height: 64px;
    border: 1px solid #eee;
  }
}
.token-val {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}
.token-name {
  margin-top: 4px;
  font-size: 14px;
  color: #333;
}
.token-key {
  font-size: 12px;
  color: #666;
}
.token-desc {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}
.token-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  > svg {
    vertical-align: top;
    width: 1em;
    height: 1em;
    color: currentColor;
  }
}
.token-box {
  width: 120px;
  height: 32px;
  margin: auto;
  background-color: #eee;
}

@keyframes move {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(300px, 0, 0);
  }
}

.token-ball {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #aaa;
  animation: move infinite;
  animation-duration: 1000ms;
  animation-timing-function: linear;
}

.theme-switch {
  position: fixed;
  top: 48px;
  right: 0;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.1);
}
.theme-item {
  cursor: pointer;
  + .theme-item {
    margin-top: 8px;
  }
  &:hover {
    color: blue;
  }
  &.is-active {
    color: red;
    text-decoration: underline;
  }
}
</style>
